<template>
  <div>

      <mh :total="totalCount()"></mh>

    <main class="" id="main-collapse">
      <div>
      
      
        <!--面包屑导航 通过：进行传参操作-->
        <bread :datas='this.datas'></bread>

        <br /><br />
        <!-- 遍历数据 -->

        <table border="1" style="width: 100%">

          <tr>

            <td>课程名称</td><td>课程数量</td><td>课程价格</td><td>操作</td>
          </tr>

          <tr v-for="(item,index) in datalist">

            <td><a :href="'http://localhost:8080/detail?id='+item.id">{{ item.title }}</a></td>
            <td>

              <Button color="blue" @click="minus(index)" >-</Button>

              <input type="text" v-model="item.num"  />

              <Button color="blue" @click="add(index)" >+</Button>

            </td>
            <td>{{ item.price }}</td>
            <td>

              <Button color="red"  @click="confirm(index)" >删除</Button>

            </td>

          </tr>

        </table>

        <br /><br />
        
        总数量： {{ totalCount() }}  &nbsp;&nbsp;&nbsp; 总价格：{{ totalPrice() }} &nbsp;&nbsp;&nbsp;
        <span v-show="myprice" >优惠价: {{ myprice }}</span>

        <br /><br />
        {{ cids }}
        <br>

        <Form :label-width="110">

            <!-- 优惠卷 -->
  
            <FormItem label="优惠卷">
  
              <div>
  
              <input type="text" v-model="discount" />
             
  
  
              </div>
  
            </FormItem>
        </Form>

        <br />
        <Button color="gray" @click="usecode(totalPrice())">使用优惠卷</Button>

        &nbsp;&nbsp;

        <Button color="green" @click="checkout(totalPrice())">结账</Button>
      
    
      </div>
    
    </main>

  </div>
</template>

 
<script>


import mh from './mh.vue';
//导入面包屑导航组件
import bread from './bread.vue';

// 导入md5加密组件
import md5 from 'js-md5';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'购物车'}],
      //数据
      datalist:[],
      discount:'',
      //优惠价
      myprice:0,
      // 存储购买的课程以及课程数量
      cids:{}
      
    }
  },
  components: {
        'mh':mh,
        //声明标签
        'bread':bread
  },
  mounted:function(){

    // 
    console.log(md5('123'));

    //初始化购物车
    var cardata = localStorage.getItem('cart');
      //判断用户是否首次访问
      if(cardata==null){
        //首次用户，定义空容器，用于添加购物车
        var cartlist = [];
      }else{

        //将字符串转换通用类型
        var cartlist = JSON.parse(cardata);
      }

      this.datalist = cartlist;

},
  methods:{

    //结账
    checkout:function(totalprice){

      //判断是否有优惠价
      if(this.myprice != 0){

        totalprice = this.myprice;

      }

      // 进行签名验证(加签)
      var sign = "mysign"+"price"+totalPrice;
      sign = md5(sign);
      console.log(sign);

      //使用箭头函数
      //传参之前，需要将json强转为string
      this.axios.get('http://localhost:8000/ordersinsert/',{params:{uid:localStorage.getItem("uid"),price:totalprice,sign:sign,cids:JSON.stringify(this.cids)}}).then((result) => {

            
        console.log(result);
        if (result.code == 401) {
          this.$Message.error('订单创建失败');
        }else{
          // 跳转页面 订单页面
          this.$router.push('/order');
        }


      });


    },
    //使用优惠卷
    usecode:function(totalprice){

      //使用箭头函数
      this.axios.get('http://localhost:8000/getcode/',{params:{code:this.discount}}).then((result) => {

            
          console.log(result);


          if(result.data.code == 401){

            this.$Message.error('该优惠卷已经过期');
            this.myprice = 0;
            return false;

          }

          //设置优惠价
          this.myprice = totalprice * result.data.data.discount;


        });



    },
    //删除确认操作
    confirm:function(index){

      //调用控件  箭头方法
      this.$Confirm('确定删除吗？','删除操作').then(() =>{

            //用户确认了
            console.log('确认了');
            this.datalist.splice(index,1);
            this.$Message.success('确认删除!');
             //赋值
            localStorage.setItem('cart',JSON.stringify(this.datalist));

      }).catch(() => {

            //用户取消了
            this.$Message.error('取消了操作');

      });


    },
    //加号逻辑
    add:function(index){

      this.datalist[index].num++;
      //赋值
      localStorage.setItem('cart',JSON.stringify(this.datalist));

    },
    //减号逻辑
    minus:function(index){

      //判断  如果数量大于1，则数量减1
      if(this.datalist[index].num > 1){

        this.datalist[index].num--;

      }else{

        //如果小于1，则删除
        this.datalist.splice(index,1);

      }

      //赋值
      localStorage.setItem('cart',JSON.stringify(this.datalist));

    },
    //计算总价格
    totalPrice:function(){

      var total = 0;

      var cartlist = this.datalist;

      //遍历
      for(let i = 0,l=cartlist.length;i<l;i++){
            //累加总数
            total += (cartlist[i].num * cartlist[i].price);
            // 统计课程明细
            this.cids[cartlist[i].title] = cartlist[i].num

      }

      //返回总价
      return total;

      },
    //计算购物车数量
    totalCount:function(){

      var total = this.datalist.length-1;

      var cartlist = this.datalist;

      //遍历
      for(let i = 0,l=cartlist.length;i<l;i++){
            //累加总数
            total+=cartlist[i].num;

      }

      //返回总数
      if(total < 0){
        total = 0;
      }
      return total;

      }

    
  }
}


</script>
 
<style>



</style>